前兩篇介紹了Tween，可以藉此建立出動態效果，但動畫不單單是元件本身的動態，以整個專案的視角來看，一定會有先後順序，有時候有微妙的時間差可以創造韻律感，或是產生更多豐富的效果。

GSAP當然也針對了時間順序提供另一組類別的函式。

Timeline定義順序
首先，這邊將gsap.timeline()定義至一自訂變數供後續使用，接下來就可以使用剛剛定義動畫的to()、from()或fromTo()函式，將動畫定義在這個時間軸上。第一個參數一樣為指定的元件，後面則定義關鍵影格狀態與duration動畫時間，最後一個參數則可以定義Timeline上的時間段，也就是開始此動畫開始的時間。

let myTimeLine = gsap.timeline();
myTimeLine.to("#my-div-one", {backgroundColor:'purple', duration: 1},2);
myTimeLine.to("#my-div-two", {backgroundColor:'yellow', duration: 1},4);

若不使用Timeline、只利用delay函式一個一個安排開始時間、建立先後順序，對於安排多網頁元件的專案來說，可想而知，管理與維護會更加複雜。除此之外，gsap.timeline()也提供傳入定義repeat、repeatDelay、yoyo值的Object參數，讓這個時間軸上的動畫效果能具有相同的規則，供需求選擇使用。

• repeat：設定時間軸上所有動畫重複播放的次數。
• repeatDelay：若有設定repeat，可設定重複播放開始前，與上一段動畫的時間間距。
• yoyo：為boolean值，true則會在下一次改由反方向播放動畫。

let myTimeLine = gsap.timeline({repeat:3,repeatDelay:3,yoyo:true});
myTimeLine.to("#my-div-one", {backgroundColor:'purple', duration: 1},2);
myTimeLine.to("#my-div-two", {backgroundColor:'yellow', duration: 1},4);